<template>
  <div>
    <div class="root">
      <van-nav-bar title="时间选择" left-arrow @click-left="onClickLeft" />
      <div class="context">
        <van-form class="van-form" @submit="onSubmit">
          <!-- 开始时间 -->
          <van-field
            readonly
            clickable
            name="datetimePicker"
            :value="starTime"
            label="时间选择"
            placeholder="点击选择开始时间"
            :rules="[{ required: true, message: '请填写开始时间' }]"
            @click="clickStarField"
          />
          <van-popup
            @click-overlay="clickStarLay"
            v-model="showPickerStar"
            position="bottom"
          >
            <van-datetime-picker
              v-model="currentDate"
              type="datetime"
              title="选择开始完整时间"
              :min-date="minDateStar"
              :max-date="maxDateStar"
              @confirm="starTimeOK"
              @cancel="starTimeCanle"
            />
          </van-popup>
          <!-- 结束时间 -->
          <van-field
            readonly
            clickable
            name="datetimePicker"
            :value="overTime"
            label="时间选择"
            placeholder="点击选择结束时间"
            @click="showPickerOver = true"
            :rules="[{ required: true, message: '请填写结束时间' }]"
          />
          <van-popup
            @click-overlay="clickOverLay"
            v-model="showPickerOver"
            position="bottom"
          >
            <van-datetime-picker
              v-model="currentDateOver"
              type="datetime"
              title="选择结束完整时间"
              :min-date="minDateOver"
              :max-date="maxDateOver"
              @confirm="overTimeOK"
              @cancel="overTimeChange"
            />
          </van-popup>
          <div class="subMit-button">
            <van-button
              class="subMit-buttonIcon"
              :color="
                this.currentDate && this.currentDateOver ? '#f3b361' : '#c'
              "
              native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>
<script>
import moment from "moment";
export default {
  components: {},
  data() {
    return {
      //表单获取开始时间
      starTime: "",
      //表单结束时间
      overTime: "",
      //活动开始日历最小时间和最大时间

      // minDateStar: new Date(2024, 1, 1, 0, 0),
      minDateStar: new Date(),

      year: new Date().getFullYear(),
      month: new Date().getMonth(),
      day: new Date().getDate(),
      // 设置日期可选最小值minDate、最大值maxDate

      maxDateStar: new Date(),
      // maxDateStar: new Date(this.year + 2, this.month, this.day),
      // maxDateStar: () => {
      //   return new Date(2034, 4, 4);
      // },
      //活动结束日历最小时间和最大时间
      // minDateOver: new Date(2025, 1, 1, 1, 1),
      maxDateOver: new Date(),
      minDateOver: new Date(),

      //开始当前时间
      currentDate: "",
      //结束当前时间
      currentDateOver: "",
      //日历弹层star显示
      showPickerStar: false,
      //日期弹层over显示
      showPickerOver: false,
      //当前开始时间标准格式
      currentStarChina: "",
      //当前结束时间标准格式
      currentOverChina: "",
    };
  },
  created() {
    this.maxDateStar = new Date(this.year + 2, this.month, this.day);
    this.maxDateOver = new Date(this.year + 2, this.month, this.day);
  },
  methods: {
    //校验成功传递值和场景变换
    onSubmit() {
      this.$emit("setActiveRuleSuccess", this.starTime, this.overTime);
      //清空数据
      this.starTime = "";
      this.overTime = "";
    },
    onClickLeft() {
      this.$emit("setTimeSceneChange");
    },
    //日历开始时间确定
    starTimeOK() {
      console.log(new Date().getFullYear());

      if (
        new Date(this.currentDate).getTime() >=
        new Date(this.currentDateOver).getTime()
      ) {
        this.$toast.fail("开始时间不能大于等于结束时间");
      } else {
        this.currentStarChina = moment(this.currentDate).format(
          "YYYY-MM-DD HH:mm"
        );
        //关闭日历
        this.showPickerStar = false;
        //存储先表单显示值--标准中国格式
        this.starTime = this.currentStarChina;
      }
    },
    //日历开始时间取消
    starTimeCanle() {
      console.log(this.year);
      this.showPickerStar = false;
      this.currentDate = "";
    },
    //日历结束时间取消
    overTimeChange() {
      this.showPickerOver = false;
      // console.log(this.showPickerOver);

      this.currentDateOver = "";
    },
    //日历结束时间确定
    overTimeOK() {
      // 86400000 = 24小时
      if (
        new Date(this.currentDate).getTime() >=
        new Date(this.currentDateOver).getTime()
      ) {
        this.$toast.fail("开始时间不能大于等于结束时间");
      } else if (
        new Date(this.currentDateOver).getTime() -
          new Date(this.currentDate).getTime() <
        86400000
      ) {
        this.$toast.fail("活动持续时间不能少于一天");
      } else {
        this.currentOverChina = moment(this.currentDateOver).format(
          "YYYY-MM-DD HH:mm"
        );
        this.showPickerOver = false;
        this.overTime = this.currentOverChina;
      }
    },
    //开始时间日历变化时
    // starTimeChange(e) {
    //   this.starColDateList = e.getValues();
    //   // console.log(
    //   //   parseInt(this.starColDateList[0]) + 1,
    //   //   parseInt(this.starColDateList[1]) + 1,
    //   //   parseInt(this.starColDateList[2]) + 1,
    //   //   parseInt(this.starColDateList[3]) + 1,
    //   //   parseInt(this.starColDateList[4]) + 1
    //   // );
    // },
    clickStarField() {
      this.showPickerStar = true;
    },

    //点击开始日历弹出层的遮罩层触发
    clickStarLay() {
      this.currentDate = "";
    },
    //点击结束日历弹出层的遮罩层触发
    clickOverLay() {
      this.currentDateOver = "";
    },
  },
};
</script>
<style lang="less" scoped>
.root {
  width: 750px;
  height: 1993px;
  margin: 0 auto;
  font-size: 30px;
  background: #f7f7f7;
}
.context {
  width: 698px;
  height: 170px;
  margin: 0 auto;
  margin-top: 20px;
  width: 698px;

  border-radius: 12px;
  background: #ffffff;
}
.van-form {
  padding-left: 24px;
}
.subMit-button {
  margin: 0 auto;
  height: 173px;
  width: 323px;
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-between;
}
.subMit-buttonIcon {
  display: block;
  margin: 0 auto;
  width: 323px;
  height: 92px;
}
</style>
